<template>
    <div class="brand">
        <h3 class="title">周一周四 & 新品首发</h3>
        <van-grid :column-num="2" :gutter="8" :border="false">
            <van-grid-item v-for="item in newGoodsList" :key="item.id" @click="brandDetail(item.id)">
                <img :src="item.list_pic_url" alt="">
                <h4>{{item.name}}</h4>
                <p>{{item.retail_price | RMBformat}}</p>
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            brandDetail(id) {
                this.$router.push('/brand?id=' + id)
            }
        },
        props: ["newGoodsList"]
    }
</script>

<style lang="less" scoped>
    .brand {
        background-color: #fff;
        margin-top: .2rem;
        margin-bottom: .2rem;

        .title {
            text-align: center;
            height: .5rem;
            line-height: .5rem;
            font-size: .2rem;
        }

        .van-grid-item {
            position: relative;
            text-align: center;

            img {
                height: 120%;
                width: 110%;
            }

            h4 {
                width: 90%;
                text-align: center;
                color: #333;
                font-size: 12px;
            }

            p {
                display: block;
                width: 90%;
                margin-top: .1rem;
                color: #8b0000;
                font-size: 12px;
            }
        }
    }
</style>